<template>
  <div class="materialDetails">
    <!--    导航开始-->
    <commonHeader
      :title="title"
      @goBack="goBack()">
    </commonHeader>
    <!--    内容开始-->
    <div class="content">
      <!--      素材名称-->
      <div class="name borderBottom">
        <h3>素材名称</h3>
        <p>{{details.name}}</p>
      </div>
      <!--      公开-->
      <div class="close borderBottom">
        <div class="closeBottom">
          <div class="title">公开使用价</div>
          <div class="totalNum">{{details.money | priceFilter}}<span> 元</span></div>
        </div>
      </div>
      <!--      素材-->
      <div class="picture">
        <h3>素材</h3>
        <img v-if="details.material_type == 'picture'" :src="details.material_path" alt="">
        <!--      视频-->
        <div v-else class="videoContainer">
          <video-player v-if="this.details.material_path"  class="video-player vjs-custom-skin"
                        ref="videoPlayer"
                        :playsinline="true"
                        :options="playerOptions"
                        @pause="onPlayerPause($event)"
                        @play="onPlayerPlay($event)"
                        @ended="onPlayerEnded($event)"
          ></video-player>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
  import commonHeader from "../../components/common/commonHeader";
  import upload from "../../components/upload";
  import {MATERIALDETAILS} from "../../apis/mine";

  export default {
    name:"materialDetails",
    components:{
      commonHeader,
      upload
    },
    data() {
      return {
        title:"详情",
        type:5,
        isCloseed:true,
        total:0,
        name:'',
        material_path:'',
        videoType:'',
        details:{},
        // 视频配置
        playerOptions: {
          // videojs options
          width:690,
          height:210,
          muted: false,
          language: 'zh-CN',
          playbackRates: [0.7, 1.0, 1.5, 2.0],
          aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
          sources: [{
            // type: 'application/x-mpegURL',
            type: "video/mp4",
            src:"",
          }],
          poster: "",
          controlBar: {
            timeDivider: true,
            durationDisplay: true,
            remainingTimeDisplay: false,
            fullscreenToggle: true  //全屏按钮
          }
        }
      }
    },
    mounted() {
      this.videoType = this.$route.query.type*1==1?1:2
      this.materialDetails()
    },
    methods:{
      // 返回
      goBack(){
        this.$router.back()
      },
      // 选择是否公开
      closeIcon(){
        this.isCloseed = !this.isCloseed
      },
      // 减
      reduce(){
        if(this.total*1<=0){
          this.$toast("最低为0！")
          return;
        }
        this.total--
      },
      // 加
      add(){
        this.total++
      },
      // 获取视频或者图片路径
      getUploadParam(item){
        this.material_path = item;

        console.log(this.material_path)
      },
      // 创建素材
      createMaterial(){
        this.addMaterial()
      },
      // 接口开始
      // 素材详情
      materialDetails(){
        let materialDetails = MATERIALDETAILS
        let params = {
          "id": this.$route.query.id?this.$route.query.id:'',
        }
        materialDetails(params).then(res=>{
          if(res.data.code*1===200){
            this.details = res.data.data;
            // 切换的时候视频初始化
            this.playerOptions.sources[0].src =  '';//视频路径
            this.playerOptions.poster = '';//默认封面图
            this.playerOptions.sources[0].src =  this.details.material_path?this.details.material_path:'';//视频路径
            this.playerOptions.sources[0].type = 'video/mp4';//视频类型
            this.playerOptions.poster = this.details.cover?this.details.cover:'';//默认封面图
          } else {
            this.$toast(res.data.message);
          }
        }).catch(error=>{
          console.log(error)
        })
      },
      // 接口结束
    },
    watch:{
      name(val){
        if(val.length*1>=25){
          this.$toast("不能超过25个字！")
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  @import (reference) url(../../assets/less/common);
  .materialDetails{
    width:100%;
    .content{
      width:100%;
      padding:1.2rem 0.3rem 0 0.3rem;
      box-sizing: border-box;
      .name{
        padding:0.3rem 0;
        box-sizing: border-box;
        h3{
          font-size: @fontSize34;
          font-family: @fontFamily400;
          font-weight: @fontWeight400;
          line-height: 0.7rem;
          color: #F5F5F5;
          margin-bottom:0.12rem;
        }
        p{
          width: 100%;
          /*padding: 0.12rem;*/
          /*box-sizing: border-box;*/
          /*background:#232323;*/
          font-size: @fontSize28;
          font-family:@fontFamily400;
          font-weight: @fontWeight400;
          color:#ffffff;
        }
      }
      .close{
        padding:0.3rem 0;
        box-sizing: border-box;
        .closeTop{
          display: flex;
          align-items: center;
          justify-content: space-between;
          h3{
            font-size: @fontSize34;
            font-family:@fontFamily400;
            font-weight: @fontWeight500;
            color:#ffffff;
          }
          img{
            width:1rem;
            height:0.5rem;
          }
        }
        .closeBottom{
          display: flex;
          align-items: center;
          justify-content:space-between;
          font-size: @fontSize28;
          font-family:@fontFamily400;
          font-weight: @fontWeight500;
          color:#ffffff;
          margin-top:0.26rem;
          .title{
            margin-right:0.2rem;
          }
          .clickNum{
            width:0.6rem;
            height:0.6rem;
            border-radius: 0.05rem;
            background: #232323;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: @fontSize40;
            font-family:@fontFamily400;
            font-weight: @fontWeight500;
            color:#ffffff;
          }
          .totalNum{
            font-size: @fontSize28;
            font-family:@fontFamily400;
            font-weight: @fontWeight500;
            color:#FD0000;
          }
        }

      }
      .picture{
        padding:0.3rem 0;
        box-sizing: border-box;
        h3{
          font-size: @fontSize34;
          font-family:@fontFamily400;
          font-weight: @fontWeight500;
          color:#ffffff;
          margin-bottom: 0.12rem;
        }
        img{
          width:100%;
          height:auto;
        }
        .videoContainer {
          width: 100%;
          object-fit: fill;
          /deep/ .vjs-big-play-button {
            font-size: 2.5em;
            line-height: 2.3em;
            height: 2.5em;
            width: 2.2em;
            -webkit-border-radius: 2.5em;
            -moz-border-radius: 2.5em;
            border-radius: 50%;
            background-color: rgba(115, 133, 159, .5);
            border-width: 0.12em;
            margin-top: -1.25em;
            margin-left: -1.45em;
          }
        }
      }
      .borderBottom{
        border-bottom:0.02rem solid #333333;
      }
    }
  }

</style>
